<template>
  <div v-if="Object.keys(comment).length !==0" class="commentinfo">
    <div class="usertitle">
      <div class="user">用户评价</div>
      <div class="user user1 ">更多</div>
    </div >
     <div class='userinfo'>
     <div><img :src="comment.user.avatar" alt=""></div>  
      <div><span>{{comment.user.uname}}</span></div>
     </div>
     <div class="comcontent">
       <div class="content">{{comment.content}}</div>
       <div><span class="time">{{nowtime}}</span><span>{{comment.style}}</span></div>
     </div>
     
    <!-- <div class="imgall">
      <img v-for="(item,index) in comment.skus" :key="item+index" :src="item.img">
      </div>       -->
  </div>
</template>
<script>
export default {
  name:'childencomment',
  props: {
    comment:{
      type:Object,
      default(){
        return{}
      }
    },
  },
  computed: {
    nowtime(){
     
     const date =new Date( this.comment.time*1000)
      var Y = date.getFullYear() + '-';
      var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
      var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
      return Y+M+D;
    }
  }
}
</script>
<style scoped>
 .commentinfo{
   margin: 0px 5px;
 }

 .usertitle{
   height: 45px;
   display: flex;
   justify-content: space-between;
   padding:10px 15px;
  box-shadow: 0px 3px 1px 0px  rgba(192,192,192,0.4);
 }
  .user{
    font-size: 19px;

  }
  .user1::before{
    content:'1';
    width:30px;
    height:30px;
    background-color:black;
    border: 1px solid rgb(192,192,192);
    display: inline-block;
    position: relative;
    border-radius: 50px;
    top: -5px;
    right: 4px;
  }
 .userinfo img{
   width: 50px;
   height: 50px;
   border-radius: 50px;
   border: 1px solid black;
 }
 .userinfo{
   margin: 20px 0px;
   height: 50px;
   display: flex;

 }
 .userinfo span{
   line-height: 50px;
   margin-left: 5px;
 }

 .content{
   font-size: 17px;
  padding-bottom: 15px;
 }
 .comcontent{
   padding-bottom: 15px;
   border-bottom: 4px solid rgb(192, 192, 192);
 }

  /* .imgall img{
    width: 45%;
    height: 260px;
    border-radius: 10px;
    margin-top: 15px;
  }
  .imgall{
      margin-top: 10px;
    margin-top: 15px;
    display: flex;
   flex-wrap: wrap;
   justify-content: space-evenly;
    border: 1px double rgb(192,192,192);
  } */
</style>